<template>
	<view class="page-content">
		<card title="流域监测" class="m-card">
			<view class="m-card-content p-content">   
				<image class="img" src="../../static/mapMonitor/ly.png" mode="widthFix"></image>
				<view class="items">
					<view class="item">
						<view class="title">河流水位</view>
						<view class="value"><text>{{ dataResource.hlsw }}</text>m</view>
					</view>
					<view class="item">
						<view class="title">河流长度</view>
						<view class="value"><text>{{ dataResource.hlcd }}</text>km</view>
					</view>
					<view class="item">
						<view class="title">河流水量</view>
						<view class="value"><text>{{ dataResource.hlsl }}</text>m³</view>
					</view>
					<view class="item">
						<view class="title">水域面积</view>
						<view class="value"><text>{{ dataResource.hlsw }}</text>km²</view>
					</view>
				</view>
			</view>
		</card>
		<card title="水污染监测" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/sz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">污染源监测点</view>
						<view class="value"><text>{{ dataResource.wryjcd }}</text>个</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水质钙镁总量</view>
						<view class="value"><text>{{ dataResource.szgmzl }}</text>吨</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水质氯化物</view>
						<view class="value"><text>{{ dataResource.hlsw }}</text>吨</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水质硫酸盐</view>
						<view class="value"><text>{{ dataResource.szlhw }}</text>吨</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">碱度</view>
						<view class="value"><text>{{ dataResource.szlsy }}</text></view>
					</view>
				</view>
			</view>
		</card>
		<card title="生物多样性监测" class="m-card">
			<view class="m-card-content p-content">
				<image class="img" src="../../static/mapMonitor/sw.png" mode="widthFix"></image>
				<view class="items">
					<view class="item">
						<view class="title">植物种类</view>
						<view class="value"><text>{{ dataResource.zwzl }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">植物数量</view>
						<view class="value"><text>{{ dataResource.zwsl }}</text>万颗</view>
					</view>
					<view class="item">
						<view class="title">动物种类</view>
						<view class="value"><text>{{ dataResource.dwzl }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">动物数量</view>
						<view class="value"><text>{{ dataResource.dwsl }}</text>万只</view>
					</view>
				</view>
			</view>
		</card>
		<card title="畜洪风险区域监测" class="m-card" v-if="dateArray.length>0">
			<view class="m-card-content r-content">
				<view class="tag-box">
					<view class="grade">{{ monitoringData.val3 }}</view>
					<view class="tag">风险等级</view>
					<image class="img" src="../../static/mapMonitor/fx.png" mode="widthFix"></image>
				</view>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">监测时间</view>
						<view class="value">
							<picker @change="bindPickerChange" :value="dateIndex" :range="dateArray" range-key="condition">
								<view class="uni-input">{{dateArray[dateIndex].condition}}</view>
							</picker>
							<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<text class="uni-input">{{date}}</text>
							</picker> -->
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">监测点数量</view>
						<view class="value"><text>{{ monitoringData.val1 }}</text>个</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">风险区域占比总面积</view>
						<view class="value"><text>{{ monitoringData.val2 }}</text>%</view>
					</view>
				</view>
			</view>			
		</card>
		<card title="河道生态修复规划" class="m-card" v-if="array.length>0">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/hdxf.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">待修复区名称</view>
						<view class="value">
							<picker @change="bindPickerChange1" :value="index" :range="array" range-key="condition">
								<view class="uni-input">{{array[index].condition}}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复方案</view>
						<view class="value"><text>{{ planData.val1 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复过程监测</view>
						<view class="value"><text>{{ planData.val2 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复效果评价</view>
						<view class="value"><text>{{ planData.val3 }}</text></view>
					</view>
				</view>
			</view>
		</card>
	</view>
</template>

<script>
	import card from "@/components/card/card.vue"
	export default {
		data() {
			return {
				date: '2021-02-24',
				startDate:'2021-01-01',
				endDate:'2022-01-01',
				array: [],
				index: 0,
				dataResource:'',
				dateArray:[],
				dateIndex:0,
				planData:'',
				monitoringData:''
			}
		},
		components:{
			card
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				this.$$.request({
					url:this.config.getSzlh,
					method:"GET",
					data:{}
				},true,true).then((res)=>{
					console.log(res)
					if(res.code == 2000) {
						this.dataResource = res.data
						this.dateArray = res.data.livestockList
						this.array = res.data.channelList
						this.getDropDownData(this.array[0].id,this.getPlanData)
						this.getDropDownData(this.dateArray[0].id,this.getMonitoringData)
					}					
				}).catch((error)=>{					
					console.log("程序错误",error.message)
				}).finally(()=>{
					console.log("complate")
				})
			},			
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.dateIndex = e.target.value				
				let id = this.dateArray[this.dateIndex].id
				this.getDropDownData(id)
			},
			bindPickerChange1: function(e) {
				this.index = e.target.value
				let id = this.array[this.index].id
				this.getDropDownData(id)
			},
			getDropDownData(search, callback) {
				this.$$.request({
					url: this.config.getSearchResult + '/' + search,
					method: "GET",
					data: {}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						callback && callback(res.data)
					}
				}).catch((error) => {
					console.log("程序错误",error.message)
				}).finally(() => {
					console.log("complate")
				})
			},
			getMonitoringData(data){
				this.monitoringData = data
			},
			getPlanData(data){
				this.planData = data
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
	background: #F4F4F4;
}

.page-content {
	padding: 30upx;
	
}
.m-card {
	margin-bottom: 20upx;
	.m-card-content {
		.img {
			display: block;
			margin: 0 auto;
			width: 200upx;
			height: 140upx;
		}
	}
	.p-content {
		position: relative;
		padding: 80upx 0 125upx;
		margin: -30upx 0 -30upx;
		.img {
			width: 292upx;
		}
		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.item {
			width: 34%;
			margin-top: 40upx;
			
			&:nth-child(even) {
				.title,.value {
					padding-left: 60upx;
				}
			}
			&:nth-child(odd){
				padding-left: 30upx;
			}
		}
		.title {
			font-size: 28upx;
			color: #333;
		}
		.value {
			font-size: 28upx;
			color: #999;
			text {
				font-size: 36upx;
				color: #00A0E9;
			}
		}
	}
	.r-content {
		position: relative;
		.tag-box {
			position: relative;
			margin-bottom: 60upx;
		}
		.grade {
			position: absolute;
			top: 10upx;
			left: 50%;
			font-size: 60upx;
			color: #00DCB0;
			transform: translateX(-50%);
		}
		.tag {
			position: absolute;
			bottom: -20upx;
			left: 50%;
			font-size: 28upx;
			font-weight: 500;
			color: #A0A5BA;
			line-height: 52upx;
			transform: translateX(-50%);
		}
		.flex {
			padding: 0 30upx;
			margin-bottom: 20upx;
			height: 70upx;
			background: #F8F8F8;
			border-radius: 35upx;
			&:last-child {
				margin-bottom: 0;
			}
			.title {
				font-size: 28upx;
				color: #333;
			}
			.value {
				font-size: 28upx;
				color: #999;
				text {
					font-size: 30upx;
				}
			}
			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10upx;
				font-size: 24upx;
			}
		}
	}
}
</style>
